var messageTxt = document.getElementById("messageTxt");
var messages = document.getElementById("messages");
var sendBtn = document.getElementById("sendBtn")

w = new WebSocket("ws://" + HOST + "/my_endpoint");
w.onopen = function () {
	console.log("Websocket connection enstablished");
};

w.onclose = function () {
	appendMessage("<div><center><h3>Disconnected</h3></center></div>");
};
w.onmessage = function (message) {
	appendMessage("<div>msg: " + message.data + "</div>");
};

sendBtn.onclick = function () {
	myText = messageTxt.value;
	messageTxt.value = "";
	text = "{'code':200,'msg':'操作成功','data':[{'ABNORMAL_QUANTITY':'12','NORMAL_QUANTITY':'321','RECORD_DATE':'2021-04-08'},{'ABNORMAL_QUANTITY':'12','NORMAL_QUANTITY':'321','RECORD_DATE':'2021-04-07'},{'ABNORMAL_QUANTITY':'2','NORMAL_QUANTITY':'122','RECORD_DATE':'2021-04-06'},{'ABNORMAL_QUANTITY':'12','NORMAL_QUANTITY':'321','RECORD_DATE':'2021-04-05'},{'ABNORMAL_QUANTITY':'12','NORMAL_QUANTITY':'321','RECORD_DATE':'2021-04-04'},{'ABNORMAL_QUANTITY':'12','NORMAL_QUANTITY':'321','RECORD_DATE':'2021-04-03'},{'ABNORMAL_QUANTITY':'21','NORMAL_QUANTITY':'321','RECORD_DATE':'2021-04-02'}]}"
	appendMessage("<div style='color: red'> me: " + myText + "</div>");
	console.log("1111", myText)
	w.send(myText);
};

messageTxt.addEventListener("keyup", function (e) {
	if (e.keyCode === 13) {
		e.preventDefault();

		sendBtn.click();
	}
});

function appendMessage(messageDivHTML) {
	messages.insertAdjacentHTML('afterbegin', messageDivHTML);
}
